<template >
	<view class="content">
		<view class="header">
			<view class="title">
				<image style="width: 36rpx; height: 36rpx;" src="../../../static/my/fh.png" mode=""></image>
				<text>订单详情</text>
			</view>
			<!-- //状态 state  0 =取消 1= 完结 -->
			<view class="state_qx" v-show="state==0">
				<image style="width: 88rpx; height: 88rpx;" src="../../../static/my/state_qx.png" mode=""></image>
				<text>已取消</text>
			</view>
			<view class="state_wj" v-show="state==1">
				<view class="wj_title1">
					订单完结
				</view>
				<view class="wj_title2">
					服务商已退款，资金将于7个工作日内原路退回至支付账户
				</view>
			</view>



			<view class="information">
				<view class="information_login">
					<image style="width: 40rpx; height: 40rpx;" src="../../../static/my/detils_dingwei.png" mode="">
					</image>
					<view class="information_login_admin">
						佐藤健 <text
							style="	font-family: PingFang SC-Medium;font-weight: Medium;font-size: 26rpx;color: #333333;">18025468585</text>
					</view>
				</view>
				<view class="information_address">
					河北省石家庄市新乐县新乐县XXXXXX街XXXXX路
				</view>
			</view>


			<view class="phone">
				<view class="phone_title">
					<image style="width: 40rpx; height: 40rpx;" src="../../../static/my/detils_jy.png" mode=""></image>
					<text>希点教育</text>
				</view>

				<view class="sj_phone">
					商家电话：<text>121212</text>
				</view>
				<view class="sj_phone">
					平台电话：<text>121212</text>
				</view>
			</view>

			<view class="goods_list" v-for="(item,index) in orderdetailsl.goodslist">
				<view class="goods_list_left">
					<image style="width: 160rpx; height: 160rpx;" :src="item.goodsimg" mode=""></image>
				</view>
				<view class="goods_list_right">
					<view class="goods_name">
						{{item.goodsname}}
					</view>
					<view class="goods_title">
						{{item.goodstitle}}
					</view>
					<view class="goods_price">
						<view class="good_sprice_left">
							￥<text>{{item.goodsprice}}</text>
						</view>
						<view class="good_sprice_right">
							<text>x{{item.goodsnumber}}</text>
						</view>
					</view>
				</view>
			</view>


			<view class="invoice">
				<image style="width: 40rpx; height: 40rpx;" src="../../../static/my/detils_jy.png" mode=""></image>
				<text>用户选择不开发票</text>
			</view>

			<view class="order_information">
				<view class="order_information_title">
					<image style="width: 40rpx; height: 40rpx;" src="../../../static/my/detils_jy.png" mode=""></image>
					<text>订单信息</text>
				</view>

				<view class="order_information_list">
					<view class="information_listone">
						<view class="information_left">
							订单编号
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
					<view class="information_listone">
						<view class="information_left">
							创建时间
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
					<view class="information_listone">
						<view class="information_left">
							付款时间
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
					<view class="information_listone">
						<view class="information_left">
							发货时间
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
					<view class="information_listone">
						<view class="information_left">
							支付方式
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
					<view class="information_listone">
						<view class="information_left">
							商品总件数
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
					<view class="information_listone">
						<view class="information_left">
							已发货件数
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
					<view class="information_listone">
						<view class="information_left">
							商品总价
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
					<view class="information_listone">
						<view class="information_left">
							税费
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
					<view class="information_listone">
						<view class="information_left">
							应付金额
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
					<view class="information_listone">
						<view class="information_left">
							实付金额
						</view>
						<view class="information_right">
							XXXXXXXXXXXXXXXXXX
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: 1,
				orderdetailsl: {
					orderid: 0,
					orderstate: 0,
					username: '里飞到',
					userphone: "12836473473434",
					address: '河北省石家庄市新乐县新乐县XXXXXX街XXXXX路',
					goodslist: [{
							id: 0,
							goodsimg: "../../../static/my/goodsimg.png",
							goodsname: '新思维早启蒙 情境思维数学 童年教育',
							goodstitle: "描述描述",
							goodsprice: "100",
							goodsnumber: "1"
						},
						{
							id: 1,
							goodsimg: "../../../static/my/goodsimg.png",
							goodsname: '新思维早启蒙 情境思维数学 童年教育',
							goodstitle: "描述描述",
							goodsprice: "100",
							goodsnumber: "1"
						}
					]
				}
			}
		},
		methods: {

		}
	}
</script>

<style>
	.template{
		
	}
	.content {
		width: 750rpx;
		height: 3000rpx;
		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {

		height: 480rpx;
		background: #1F8CFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.title {
		display: flex;
		padding-top: 118rpx;
		align-items: center;

	}

	.title image {
		float: left;
		margin-left: 30rpx;
	}

	.title text {
		margin: auto;
		padding-right: 58rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.state_qx {
		height: 200rpx;
		display: flex;
		flex-direction: column;
	}

	.state_qx image {
		margin: auto;
		padding-top: 50rpx
	}

	.state_qx text {
		margin: 10rpx auto 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		/* line-height: 38rpx; */
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.state_wj {
		height: 200rpx;

	}

	.wj_title1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 47rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin: auto;
		margin-bottom: 40rpx;
		padding-top: 70rpx;
		display: flex;
		justify-content: center;
	}

	.wj_title2 {

		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: center;
	}

	.information {
		width: 690rpx;
		height: 172rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 42rpx auto 0;
	}

	.information_login {
		display: flex;
		padding-top: 34rpx;
		margin-left: 32rpx;
		align-items: center;
	}

	.information_login_admin {
		margin-left: 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.information_address {
		margin-left: 32rpx;
		margin-top: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.phone {
		width: 690rpx;
		height: 224rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32rpx auto 32rpx;
	}

	.phone_title {
		display: flex;
		align-items: center;
		margin-left: 32rpx;
		padding-top: 34rpx;
	}

	.phone_title text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 16rpx;
	}

	.sj_phone {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 32rpx;
		padding-top: 20rpx;
	}

	.sj_phone text {
		font-family: PingFang SC-Bold;
		font-weight: bold;
		font-size: 28rpx;
		color: #409CFD;
	}

	.goods_list {
		width: 690rpx;
		height: 224rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32rpx auto 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods_list_right {
		height: 160rpx;
		margin-left: 16rpx;
	}

	.goods_name {
		height: 33%;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.goods_title {
		height: 33%;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.goods_price {
		display: flex;
		height: 33%;
		margin-top: 14rpx;
	}

	.good_sprice_left {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #409CFD;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		width: 200rpx;
	}

	.good_sprice_left text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #409CFD;
	}

	.good_sprice_right {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.invoice {
		width: 690rpx;
		height: 112rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: auto;
		display: flex;
		align-items: center;
	}

	.invoice image {
		margin-left: 32rpx;
	}

	.invoice text {
		margin-left: 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.order_information {
		width: 690rpx;
		
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32px auto 32rpx;

	}

	.order_information_title {
		display: flex;
		align-items: center;
		padding-top: 36rpx;
		margin-left: 32rpx;
		padding-bottom: 34rpx;
	}

	.order_information_title text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 16rpx;
	}

	.order_information_list {
		
		
		margin-left: 32rpx;
	}
	.information_listone{
		display: flex;
		align-items: center;
		margin: 20px auto 0;
		padding-bottom: 40rpx;
	}
	.information_left {
		margin-right: auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		
	}
	.information_right{
		margin-left: auto;
		padding-right: 32rpx;
	}
</style>